<template>
  <div v-title data-title="手机快速注册" class="reg-container">
    <div class="form-tel-number border-bottom">
      <input type="number" class="tel-number-input" placeholder="请输入手机号码" v-model="phoneNumber"/>
    </div>
    <div class="form-tel-code border-bottom">
      <input type="text" class="tel-code-input" placeholder="请输入短信验证码" v-model="identifyCode"/>
      <div v-if="countDownNum === 0" @click="getIdentifyCode('sms')" class="get-tel-code-btn">获取验证码</div>
      <div v-else class="disabled-code-btn">剩余（{{countDownNum}}s）</div>
    </div>
    <voice-auth-code class="voice-auth-code" ref="voiceAuthCode" @sendVoiceSms="getIdentifyCode"></voice-auth-code>
    <div class="register-protocal">
      <img class="img-check" :src="imgNormal" @click="protocalAgree"/>
      <span class="protocal-content">已阅读并同意<a href="http://marketui.aishangjinfu.cn/protocol/registerProtocol.html" class="user-register-protocal">《用户注册协议》</a></span>
    </div>
    <button class="login-button" @click="login">注&nbsp;&nbsp;册</button>
  </div>
</template>
<script>
  import { mapMutations } from 'vuex'
  import { httpReq } from '@/common/api'
  import voiceAuthCode from '@/components/voiceAuthCode.vue'

  export default{
    name:'Registe',
    data () {
      return {
        imgNormal: '../../../../static/img/btn_select.png',
        countDownNum: 0,
        message: '',
        phoneNumber: '',
        identifyCode: ''
      }
    },
    components:{
      voiceAuthCode
    },
    methods: {
      countDown(){
        this.countDownNum = 60
        let clock = setInterval(()=> {
          this.countDownNum--
          if (this.countDownNum === 0) {
            clearInterval(clock)
          }
        }, 1000)
      },
      protocalAgree: function () {
        const normal = '../../../../static/img/btn_normal.png'
        const select = '../../../../static/img/btn_select.png'
        this.imgNormal = this.imgNormal === normal ? select : normal
      },
      login: function () {
        if (!this.phoneNumber) {
          this.$toast('请填写手机号码')
          return
        }
        const telReg = /^1[3|5|7|8|4|6|9][0-9]{9}$/
        if (!telReg.test(this.phoneNumber)) {
          this.$toast('手机号码填写有误')
          return
        }
        if (!this.identifyCode) {
          this.$toast('请填写验证码')
          return
        }
        if (this.imgNormal === '../../../../static/img/btn_normal.png') {
          this.$toast('请阅读并同意《用户注册协议》')
          return
        }
        const data = {
          channel: 'h5',
          mobile: this.phoneNumber,
          code: this.identifyCode
        };
        httpReq('POST','/list/finance/app/normal/register',{},data).then((res)=>{
          this.changeUserTel(this.phoneNumber)
          this.changeUserToken(res.token)
          this.$router.push('/')
        }).catch((err)=>{
          this.$toast(err)
        })
      },
      ...mapMutations(['changeUserTel', 'changeUserToken']),
      getIdentifyCode: function (type) {
        if (!this.phoneNumber) {
          this.$toast('请填写手机号码')
          return
        }
        const telReg = /^1[3|5|7|8|4|6|9][0-9]{9}$/
        if (!telReg.test(this.phoneNumber)) {
          this.$toast('手机号码填写有误')
          return
        }
        const params = {
          mobile: this.phoneNumber,
          type:2
        };
        switch (type){
          case 'sms':
            httpReq('POST','/list/finance/app/sendSms',params).then((res)=>{
              this.$toast('验证码已发送，请注意查收');
              this.countDown()
            }).catch((err)=>{
              this.$toast(err)
            })
            break;
          case 'voice':
            httpReq('POST','/list/finance/app/sendSms/Voice',params).then((res)=>{
              this.$refs.voiceAuthCode.showTip()
              this.countDown()
            }).catch((err)=>{
              this.$toast(err)
            })
            break;
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
@import "~style/varibles.styl"
.voice-auth-code
  margin-top 15px
.reg-container
  padding :.9rem .5rem
  input::-webkit-input-placeholder
    color :$placeholderColor
    letter-spacing:.01rem
  .form-tel-number, .form-tel-code
    padding :.4rem .1rem
  .form-tel-code
    display :flex
    justify-content space-between
    align-items center
    .get-tel-code-btn
      color :$textButton
    .disabled-code-btn
      color :$disabledText
  .register-protocal
    display :flex
    align-items center
    margin :.4rem 0
    .img-check
      width :.34rem
      height :.34rem
    .protocal-content
      font-size :.26rem
      margin-left :.16rem
      .user-register-protocal
        color :$textButton
  .login-button
    width :100%
    height :.88rem
    border-radius :.04rem
    line-height :.88rem
    font-size :.32rem
    background :linear-gradient(to right, $gradientDeep , $gradientTint)
    color :white
  .reg-tip
    margin-top :1rem
    text-align center
  &.reg-btn
    color :$textButton

</style>
